<template>
  <div class="side-bar-viewer-page-wrapper">
    <div class="viewer-page-content">
      <a-tree checkable defaultExpandAll v-model:checkedKeys="checkedKeys">
        <!-- <a-tree-node key="scene" title="场景设置"> -->
          <a-tree-node v-for="(e, i) in items" :key="e.key" :title="e.title" :disableCheckbox="e.readonly" />
        <!-- </a-tree-node> -->
      </a-tree>
    </div>
  </div>
</template>

<script lang="ts">
import { GlobalOutlined, PictureOutlined, SwitcherOutlined, SettingOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'viewer-page',
  components: { GlobalOutlined, PictureOutlined, SwitcherOutlined, SettingOutlined },
  setup() {
    return {};
  },
  props: {
    viewerSource: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      checkedKeys: [],
      items: [],
      itemsMap: {}
    };
  },
  computed: {
    viewer() {
      return this.viewerSource.viewer;
    },
    scene() {
      return this.viewer && this.viewer.scene;
    },
    globe() {
      return this.scene && this.scene.globe;
    },
    strCheckedKeys(){
      return JSON.stringify(this.checkedKeys)
    }
  },
  watch: {
    viewer: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.update();
        }
      },
      immediate: true
    },
    strCheckedKeys(val){
      this.updateTree();
    }
  },
  methods: {
    update(){
      const vm = this;
      const {viewer,scene,globe} = vm;
      const items =[
        {target: "globe.show", title: 'show', value: globe.show},
        {target: "globe.enableLighting", title: 'enableLighting', value: globe.enableLighting},
        {target: "globe.showGroundAtmosphere", title: 'showGroundAtmosphere', value: globe.showGroundAtmosphere},
        {target: "globe.showWaterEffect", title: 'showWaterEffect', value: globe.showWaterEffect},
        
        {target: "viewer.terrainShadows", title: '地形阴影', value: viewer.terrainShadows},
        {target: "viewer.shadows", title: '阴影', value: viewer.shadows},
        
        {target: "globe.depthTestAgainstTerrain", title: 'depthTestAgainstTerrain', value: globe.depthTestAgainstTerrain},
        
        {target: "viewer.useBrowserRecommendedResolution", title: '高分辨率', value: viewer.useBrowserRecommendedResolution},
        {target: "scene.highDynamicRangeSupported", title: 'highDynamicRangeSupported', value: scene.highDynamicRangeSupported, readonly: true},
        {target: "scene.highDynamicRange", title: 'highDynamicRange', value: scene.highDynamicRange},
        {target: "scene.invertClassificationSupported", title: 'invertClassificationSupported', value: scene.invertClassificationSupported, readonly: true},
        {target: "scene.invertClassification", title: 'invertClassification', value: scene.invertClassification},
        {target: "scene.logarithmicDepthBuffer", title: 'logarithmicDepthBuffer', value: scene.logarithmicDepthBuffer},
        {target: "scene.orderIndependentTranslucency", title: 'orderIndependentTranslucency', value: scene.orderIndependentTranslucency, readonly: true},
        {target: "scene.pickPositionSupported", title: 'pickPositionSupported', value: scene.pickPositionSupported, readonly: true},
        {target: "scene.pickTranslucentDepth", title: 'pickTranslucentDepth', value: scene.pickTranslucentDepth},
        {target: "scene.requestRenderMode", title: 'requestRenderMode', value: scene.requestRenderMode},
        {target: "scene.sampleHeightSupported", title: 'sampleHeightSupported', value: scene.sampleHeightSupported, readonly: true},
        {target: "scene.scene3DOnly", title: 'scene3DOnly', value: scene.scene3DOnly, readonly: true},
        {target: "scene.specularEnvironmentMapsSupported", title: 'specularEnvironmentMapsSupported', value: scene.specularEnvironmentMapsSupported, readonly: true},
        {target: "scene.sunBloom", title: 'sunBloom', value: scene.sunBloom},
        {target: "scene.useDepthPicking", title: 'useDepthPicking', value: scene.useDepthPicking},
        // {target: "scene.useWebVR", title: 'useWebVR', value: scene.useWebVR},

        {target: "scene.cameraUnderground", title: 'cameraUnderground', value: scene.cameraUnderground, readonly: true},
        {target: "scene.clampToHeightSupported", title: 'clampToHeightSupported', value: scene.clampToHeightSupported, readonly: true},
        {target: "scene.completeMorphOnUserInput", title: 'completeMorphOnUserInput', value: scene.completeMorphOnUserInput},

        {target: "scene.debugShowCommands", title: 'debugShowCommands', value: scene.debugShowCommands},
        {target: "scene.debugShowFramesPerSecond", title: 'debugShowFramesPerSecond', value: scene.debugShowFramesPerSecond},
        {target: "scene.debugShowFrustumPlanes", title: 'debugShowFrustumPlanes', value: scene.debugShowFrustumPlanes},
        {target: "scene.debugShowFrustums", title: 'debugShowFrustums', value: scene.debugShowFrustums},
        {target: "scene.debugShowGlobeDepth", title: 'debugShowGlobeDepth', value: scene.debugShowGlobeDepth},

        {target: "globe.backFaceCulling", title: 'backFaceCulling', value: globe.backFaceCulling},
        {target: "globe.dynamicAtmosphereLightingFromSun", title: 'dynamicAtmosphereLightingFromSun', value: globe.dynamicAtmosphereLightingFromSun},
        {target: "globe.preloadAncestors", title: 'preloadAncestors', value: globe.preloadAncestors},
        {target: "globe.showSkirts", title: 'showSkirts', value: globe.showSkirts},
      ]

      vm.itemsMap = {};
      items.forEach(e=>{
        const [target,propName] = e.target.split('.');
        e.key = e.target;
        e.target = target;
        e.propName = propName;
        vm.itemsMap[e.key] = e;
      })

      vm.items = items;

      vm.checkedKeys = items.filter(e=>e.value).map(e=>e.key);
    },
    updateTree(){
      const vm = this;
      const checkedKeysMap = {};
      this.checkedKeys.forEach(k=>{
        checkedKeysMap[k] = true;
      })
      vm.items.forEach(e=>{
        if(!e.readonly){
          const target = vm[e.target];
          target[e.propName] = !!checkedKeysMap[e.key]
        }
      })
    }
  }
});
</script>

<style lang="less" scoped>
.side-bar-viewer-page-wrapper {
  height: 100%;
  width: 100%;
  padding: 10px 0;
  background-color: rgba(0, 0, 0, 0.8);
  .viewer-page-content {
    padding: 0 10px;
    // height: 100%;
    width: 100%;
    overflow: hidden auto;

    :deep(.ant-tree) {
      overflow: hidden;
      li {
        .ant-tree-node-content-wrapper {
          &:hover {
            background-color: rgba(0, 200, 255, 0.2);
          }
        }
        &.ant-tree-treenode-disabled .ant-tree-node-content-wrapper {
          &:hover {
            background-color: transparent;
          }
        }
        .ant-tree-node-content-wrapper .ant-tree-title {
          color: white;
        }
        &.ant-tree-treenode-disabled .ant-tree-node-content-wrapper .ant-tree-title {
          color: gray;
        }
      }
    }
  }
}
</style>
